$('#pay_dropBoxAnios1, #pay_dropBoxAnios2, #pay_dropBoxAnios3').on('click', function(event) {

    var $target = $( event.currentTarget );
    $target.closest( '.btn-group' )
      .find( '[data-bind="label"]' ).text( $target.text() )
      .end()
      .children( '.dropdown-toggle' ).dropdown( 'toggle' );
      
    $("#titulo").text("Detalle de Pagos Anuales - " + $target.text());
    
    $anio = $target.text();
    
    $("#pagosTbl tbody").remove();
    $('#progressPagos').modal({ backdrop: 'static' });
    
    //var $noPagado = '<button id="botonaso" type="button" class="btn btn-danger">No Pagado</button>';
    //var $noPagado = '<img src="wrong.jpg" alt="wrong" class="img-responsive"  style="width: 50%; height: 25%;">';
    var strBtnPagoNoPago = '<button id="btnPago_%MES%_%ID%" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>';
    var cont = 0;
    
    $.ajax({
          url:'dbPagos.php',
          type:'POST',
          data: { 'anio': $anio }
      }).success(function(json){
            $.each(json, function(i, item) {                        
                if(typeof item == 'object') {
                
                    cont = cont + 1;
                
                    $('#pagosTbl').append('<tr id="filasas"> <td>' + item.servicio + '</td>' 
                    + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 1 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 2  )).replace("%ID%", cont) + '</td>'
                    + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 3 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 4  )).replace("%ID%", cont) + '</td>'
                    + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 5 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 6  )).replace("%ID%", cont) + '</td>'
                    + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 7 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 8  )).replace("%ID%", cont) + '</td>'
                    + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 9 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 10 )).replace("%ID%", cont) + '</td>'
                    + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 11)).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 12 )).replace("%ID%", cont) + '</td></tr>');
                //$('#pagosTbl').append('<tr id="filasas"> <td>' + item.servicio + '</td>
                } 
                else {
                    return false;
                }
            }) // end $.each() loop
            
            $('#progressPagos').modal('hide');
    
    })
        .fail(function()  {alert("ERROR!!");});    
});              

$(document).on("click", '[id^=btnPago]', function(){
  alert ('button clicked');
});